class Dnd {
    isDragging = false;
    selectDom: HTMLElement | null = null;
    scale: number;
    draggableDom: HTMLElement;
    parentDom: HTMLElement;
    offsetX: number = 0;
    offsetY: number = 0;
    initScale: number
    constructor(parentDom: HTMLElement, draggableDom: HTMLElement, scale: number = 1) {
        this.draggableDom = draggableDom
        this.parentDom = parentDom
        this.initScale = scale
        this.scale = scale
        this.init()
    }
    init() {
        const that = this;
        let [offsetX, offsetY] = [0, 0];
        let { draggableDom, parentDom, selectDom } = this;
        // draggableDom.style.cursor = "move"
        // 建立定位
        let parentDomstyles = window.getComputedStyle(parentDom)

        if (draggableDom instanceof NodeList && draggableDom.length) {
            draggableDom.forEach((item: HTMLElement) => {
                let draggableDomStyles = window.getComputedStyle(item);
                if (draggableDomStyles.position !== 'absolute') {
                    item.style.position = 'absolute';
                }
            })
        } else {
            let draggableDomStyles = window.getComputedStyle(draggableDom)
            if (parentDomstyles.position !== 'relative') {
                parentDom.style.position = 'relative';
            }
            if (draggableDomStyles.position !== 'absolute') {
                draggableDom.style.position = 'absolute';
            }
        }

        // 拖动元素鼠标按下
        parentDom.addEventListener('mousedown', function (e) {
            console.log(e.target)
            if (e.target instanceof HTMLElement && e.target.classList.contains('lego-editor-container-panel-component-item')) {
                that.isDragging = true;
                that.selectDom = e.target;
                offsetX = (e.clientX - e.target.offsetLeft * that.scale) / that.scale;
                offsetY = (e.clientY - e.target.offsetTop * that.scale) / that.scale;
                e.target.style.cursor = 'grabbing';
            }
        })

        // 可拖拽区域元素移动
        parentDom.addEventListener('mousemove', (e) => {
            if (this.isDragging) {
                let newLeft = e.clientX / this.scale - offsetX;
                let newTop = e.clientY / this.scale - offsetY;
                // 最大的边界坐标
                let maxLeft = parentDom.offsetWidth - this.selectDom.offsetWidth;
                let maxTop = parentDom.offsetHeight - this.selectDom.offsetHeight;
                // 边界检测
                if (newLeft < 0) newLeft = 0;
                if (newTop < 0) newTop = 0;
                if (newLeft > maxLeft) {
                    newLeft = maxLeft;
                }
                if (newTop > maxTop) {
                    newTop = maxTop;
                }
                this.selectDom.style.left = `${newLeft}px`;
                this.selectDom.style.top = `${newTop}px`;
            }
        });

        // 文档鼠标弹起
        document.addEventListener('mouseup', () => {
            this.isDragging = false;
            // draggableDom.style.cursor = 'move';
        });
    }
    // 设置缩放
    setScale(n: number) {
        this.scale = n
    }
    // 重置
    reset() {
        this.scale = this.initScale
    }
}

export default Dnd